<template>
  <div class="home-container">
    <!-- 轮播图部分 -->
    <div class="carousel-container">
      <el-carousel :interval="3000" arrow="never">
        <el-carousel-item v-for="(item, index) in carouselData" :key="index">
          <img :src="item.image">
          <div class="carousel-caption">{{ item.caption }}</div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 咖啡店介绍和销售表格部分 -->
    <div class="coffee-info-container">
      <!-- 咖啡店介绍部分 -->
      <div class="coffee-info-card">
        <el-descriptions
            class="margin-top"
            title="咖啡店信息"
            :column="3"
            border
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <user />
                </el-icon>
                管理员
              </div>
            </template>
            飞飞公主
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <iphone />
                </el-icon>
                联系电话
              </div>
            </template>
            13875970829
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <location />
                </el-icon>
                店铺位置
              </div>
            </template>
            湖南长沙
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets />
                </el-icon>
                店铺类型
              </div>
            </template>
            <el-tag size="small" type="warning">咖啡店</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <office-building />
                </el-icon>
                具体地址
              </div>
            </template>
            湖南省长沙市开福区开福大道666号
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 销售表格部分 -->
      <div class="sales-info-card">
        <div class="chosse">
          <h4>销售统计</h4>
          <el-select v-model="selectedYear" class="m-2" placeholder="请选择">
            <el-option
                v-for="(item,index) in tableData"
                :key="index"
                :value="item.year"
                :label="item.year"
            />
          </el-select>
        </div>
        <bar-graph :width="'1200px'" :height="'600px'" :selected-year="selectedYear" :table-data="tableData"></bar-graph>
      </div>
    </div>
  </div>

</template>

<script setup>
import {computed, onMounted, ref} from "vue";
import BarGraph from "../tools/BarGraph.vue";
import axios from "axios";
// 轮播图数据
const carouselData = [
  { caption: '我们的咖啡店精所追求的是极致的品质和服务', image: 'src/assets/images/lbt1.jpg' },
  { caption: '严格挑选每一个咖啡豆，只为呈现最优质的咖啡', image: 'src/assets/images/lbt2.jpg' },
  { caption: '小心谨慎进行操作，确保每杯咖啡都是经过精心调制的', image: 'src/assets/images/lbt3.jpg' },
  { caption: '严格把控时间和比例，确保每一份材料的质量和口感都是完美的', image: 'src/assets/images/lbt4.jpg' },
  { caption: '对每一个顾客的需求进行精准把控，让每位顾客的口感都得到满足', image: 'src/assets/images/lbt5.jpg' }
];
// 销售表部分数据
const tableData = ref([]);
const selectedYear = ref(''); // 默认选择

const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
})

// 在组件挂载后执行回调函数
onMounted(() => {
  getData()
})

// 获取数据
const getData = () => {
  axios.get("http://192.168.166.182:8080/picture/getYear")
      .then(response => {
        console.log(response.data)
        tableData.value  = response.data;
        selectedYear.value = tableData.value[0].year;
      })
      .catch(error => {
        console.error(error);
      })
}
</script>

<style scoped>
.home-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px;
}

.carousel-container {
  margin-bottom: 20px;
}

.carousel-caption {
  position: absolute;
  bottom: 50px;
  left: 50px;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 1px 1px #000;
}

.coffee-info-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 1300px;
}

.coffee-info-card {
  width: 92%;
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sales-info-card {
  width: 92%;
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
.chosse {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.m-2 {
  width: 120px;
}
</style>
